<template>
  <div>
    <!-- 按钮 -->

    <el-button style="margin:10px 10px" type="primary" icon="el-icon-refresh-right" circle
      @click="getDynamicExtensionProcessList"></el-button>
    <el-button type="primary" @click="add()">添加</el-button>

    <!-- <el-button type="primary" icon="el-icon-plus" style="margin:10px" @click="getShow">添加</el-button> -->
    <!-- 表格
          data 展示数据 —— 数组类型
        -->
    <el-table style="width: 100%;" border :data="list">
      <el-table-column prop="name" label="敏感词" align="center">
      </el-table-column>
<!--
      <el-table-column prop="createTime" label="时间" align="center">
      </el-table-column> -->

      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="{ row, $index }">
        <!-- <el-popconfirm title="是否修改？" icon="el-icon-info" icon-color="red" @confirm="getDelete(row.id)">
           <el-tooltip content="修改" placement="top" slot="reference">
             <el-button type="primary" icon="el-icon-edit"></el-button>
           </el-tooltip>
         </el-popconfirm> -->
          <el-popconfirm title="是否删除？" icon="el-icon-info" icon-color="red" @confirm="getDelete(row.id)">
            <el-tooltip content="删除" placement="top" slot="reference">
              <el-button type="danger" icon="el-icon-delete"></el-button>
            </el-tooltip>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination style="margin-top:20px;textAlign:center" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" :current-page="pageNumber" :page-sizes="[10, 50, 100]" :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>

    <!-- 对话框  -->
    <el-dialog title="添加敏感词" :visible.sync="dialogFormVisible">
      <el-form style="width:80%" :model="tmFrom" :rules="rules" ref="ruleForm">
        <el-form-item label="敏感词" label-width="100px" prop="name">
          <el-input autocomplete="off" v-model="tmFrom.name"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="getAddBannerImage" v-if="state">确 定</el-button>
        <el-button type="primary" @click="UpdateBillingRules" v-else>修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'SensitiveWords',
    data() {

      return {
        //页码
        pageNumber: 1,
        //每页数量
        pageSize: 10,
        //总条数
        total: 0,

        //列表数据
        list: [],
        FrontPageUrlConfigurationList: [],
        // 对话框显示与隐藏控制
        dialogFormVisible: false,
        // 表单对象
        tmFrom: {
          // name: '',
          // proportion: '',
          // intro: ''
          adUserIds: "",
          content: "",
          isTop: "",
          linkType: "",
          linkUrl: "",
          receiveType: 1,
          sexType: "",
        },
        // 当前为修改还是添加 修改为false 添加为true
        state: true,
        // 表单验证
        rules: {
          // name: [{
          //   required: true,
          //   message: '请输入规则名称',
          //   trigger: 'blur'
          // }],
          // proportion: [{
          //     required: true,
          //     message: '请选择计费比列，数字和小数',
          //     trigger: 'blur'
          //   },
          //   {
          //     transform(value) {
          //       return Number(value);
          //     },
          //     validator(rule, value, callback) {
          //       if (Number.isFinite(value) && value > 0) {
          //         callback();
          //       } else {
          //         callback(new Error("请输入类型为数字和小数，并不少于0"));
          //       }
          //     },
          //     trigger: "blur",
          //   }
          // ],
          // intro: [{
          //   required: true,
          //   message: '请选择规则简介',
          //   trigger: 'blur'
          // }]
        }
      }
    },
    mounted() {
      this.getNotificationManagementPageList()
    },

    methods: {
      async getNotificationManagementPageList() {
        let res = await this.$API.system.pageKeywordInterception({
          pageNumber: this.pageNumber,
          pageSize: this.pageSize,
          name: ''
        })
        console.log(res, "关键词列表")
        this.total = res.data.sumLine;
        this.list = res.data.rows;
      },



      // 取消
      getShow() {
        this.state = true
        this.dialogFormVisible = true
        this.tmFrom = {
          // name: '',
          // proportion: '',
          // intro: ''
        }
      },
      // 刷新
      getDynamicExtensionProcessList() {
        this.getNotificationManagementPageList()
      },
      // 添加一条
      add() {
        this.dialogFormVisible = !this.dialogFormVisible
        this.tmFrom = {
          // name: '',
          // proportion: '',
          // intro: ''
        }

      },
      // 添加
      getAddBannerImage() {
        this.$refs.ruleForm.validate(async (valid) => {
          if (valid) {
            let res = await this.$API.system.addKeywordInterception(this.tmFrom);
            this.dialogFormVisible = false;
            this.getNotificationManagementPageList();
          } else {
            console.log('error submit!!');
            return false;
          }
        })
      },


      // 删除
      async getDelete(id) {
        let res = await this.$API.system.deleteKeywordInterception({
          id: id
        });
        this.getNotificationManagementPageList();
      },

      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val
        this.getNotificationManagementPageList()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.pageNumber = val
        this.getNotificationManagementPageList()
      },
    }
  }
</script>

<style lang="scss">
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
